<!-- halfCirclePie -->
<template>
  <div :style="{ paddingTop: '15px', position: 'relative' }">
    <div ref="chart" :style="{ width: props.width, height: props.height, margin: '0 auto' }"></div>
    <div class="start">{{ startP }}</div>
    <div class="end">{{ endP }}</div>
    <div class="sub-title">{{ subText }}</div>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, watch, ref, Ref } from 'vue'
  import { getAnnulusOption } from '@/utils/options'
  import * as echarts from 'echarts'
  import { formatValue } from '../utils/common'

  interface Props {
    width: string
    height: string
    data: number[]
    text?: string
    subText?: string
    colorList?: string[]
  }
  const props = defineProps<Props>()

  const chart = ref()
  const startP = ref('')
  const endP = ref('')

  /**渲染半开环形图 */
  const renderCharts = () => {
    echarts.dispose(chart.value!)
    const [dividend, divisor] = props.data
    const data = [dividend, divisor - dividend]
    const percentage = divisor === 0 ? 0 : (dividend / divisor) * 100
    const text = formatValue(percentage, 0)
    const subText = ''
    const textFontSize = 20
    const subTextFontSize = 0
    const colorList = !props.colorList?.length ? ['#63A9F8', '#F1F1F1'] : props.colorList
    const option = getAnnulusOption(
      data,
      colorList,
      text as string,
      subText,
      textFontSize,
      subTextFontSize
    )
    const charts = echarts.init(chart.value!)
    charts.setOption(option)
    startP.value = '0'
    endP.value = '100%'
  }

  watch(
    props,
    () => {
      renderCharts()
    },
    {
      deep: true
    }
  )

  onMounted(async () => {
    nextTick(() => {
      renderCharts()
    })
  })
</script>
<style lang="scss" scoped>
  .start {
    position: absolute;
    color: #eaecef;
    font-size: 12px;
    z-index: 1000;
    top: 55%;
    left: 20.5%;
  }
  .end {
    position: absolute;
    color: #eaecef;
    font-size: 12px;
    z-index: 1000;
    top: 55%;
    right: 17%;
  }

  .sub-title {
    position: absolute;
    color: #eaecef;
    font-size: 14px;
    z-index: 1000;
    top: 60%;
    right: 0;
    left: 0;
    text-align: center;
  }
</style>
